<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/iscroll.js"></script>
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        header,
        footer {
            background-color: #000;
            height: 50px;
            line-height: 50px;
            color: #fff;
            text-align: center;

        }

        section {
            flex: 1;
            overflow: hidden;
        }

        ul li {
            margin: 10px;
            height: 80px;
            line-height: 80px;
        }

        .main {
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;

        }
    </style>
</head>

<body>
    <div class="container">
        <header>头部</header>
        <section>
            <div class="main">
                <ul>
                    <li>31省区市新增确诊病例42例</li>
                    <li>美国新冠肺炎确诊超46万例</li>
                    <li>金银潭最年轻护士坚守ICU三个月</li>
                    <li>4比尔盖茨感谢武汉人民的牺牲</li>
                    <li>高管涉性侵养女案还有多少疑点</li>
                    <li>美确诊老人死前向语音助手求助</li>
                    <li>广东黑龙江共新增4例本土病例</li>
                    <li>3月份居民消费价格同比上涨4.3%</li>
                    <li>31省区市新增47例无症状感染者</li>
                    <li>商业银行正式进入金融期货市场</li>
                </ul>
            </div>
        </section>
        <footer>底部</footer>
    </div>
    <script>
        new IScroll(".main", {
            scrollbars: false,
            fadeScrollbars: true,
            bounce: true,
            click: true
        })
        // 一、iscroll.js IScroll.js插件是兼容所有移动端滚动条事件的插件，在某些安卓机中，
        // 我们无法通过overflo:scroll这个css属性来出现滚动条；它也可以非常好的在一个容器元素中处理滚动; 
        // 要求: 1》要给滚动区域加入一个父元素 
        // 2》父元素的高度值要小于，滚动区块的高度 
        // 3》new IScroll(".main",{ 
        //     scrollbars: true //是否显示滚动条。默认为false; 
        //     fadeScrollbars:true// 滚动条淡入淡出效果,当然前提是你滚动条显示了。默认为false; 
        //     bounce: false //滚动到达容器边界时是否执行反弹动画。默认为true; 
        //     click:true //iScroll禁止默认鼠标的点击行为，如果要使用设置true;默认为false;
        //      });
    </script>
</body>

</html>